<!-- 视图轨迹 -->

<template>
  <div :class="obj.class" :style="obj.style">
    <div class="whole" @click="showTip = true">{{ obj.text }}</div>

    <WebShow v-show="showTip" :one="obj" class="Secure-MapView-point-tip flexCC noMove">
      <div class="Secure-MapView-point-tip-close" @click="showTip = false">
        <i class="el-icon-close" />
      </div>

      <ShowPhoto bind="passData" square :squareSize="120" noLabel noMargin />

      <div class="flex1">
        <div>
          <label>姓名：</label><span>{{ obj.name || '-' }}</span>
        </div>
        <div>
          <label>联系方式：</label><span>{{ obj.phone || '-' }}</span>
        </div>
        <div>
          <label>证件号码：</label><span>{{ obj.idNo || '-' }}</span>
        </div>
        <div>
          <label>地点：</label><span>{{ obj.address || '-' }}</span>
        </div>
        <div>
          <label>时间：</label><span>{{ CORE.timeStr(obj.accessTime) || '-' }}</span>
        </div>
      </div>
    </WebShow>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TrackPoint',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      showTip: false, // 是否显示提示
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 折线列表
     */
    tipClass() {
      const name = 'Secure-MapView-point-tip'
      return `${name} flexCC noMove`
    },
  },
}
</script>
